<template>
  <!-- 基本信息 -->
  <div>
    <div class="title-wrapper">
      <title-name title="结果验证"></title-name>
      <a-icon
        v-if="showPlanBoardVisible"
        :type="planBoardVisible ? 'up' : 'down'"
        @click="planBoardVisible = !planBoardVisible"
      />
    </div>
    <div v-if="planBoardVisible">
      <!-- 表单信息 -->
      <custom-form ref="ruleForm" isValidate :rules="!onlyRead ? rules : {}" :formList="formList" :form="form" :editModel="onlyRead ? 'V' : 'E'"
        :isEmit="false">
      </custom-form>
    </div>
    
  </div>
</template>

<script>
import Selector from '@/components/Select/Selector' // 选择器
export default {
  name: 'a' + Date.now(),
  components: {
  },
  props: {
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    // 只读模式
    onlyRead: {
      type: Boolean,
      default: () => false
    },
    // 是否显示箭头
    showPlanBoardVisible: {
      type: Boolean,
      default: () => false
    },
    // 默认展开
    defaultPlanBoardVisible: {
      type: Boolean,
      default: () => true
    }
  },
  watch: {
    defaultPlanBoardVisible: {
      handler(val) {
        this.planBoardVisible = val
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      planBoardVisible: false,
      rules: {
        resultId: [{ required: true, whitespace: true, message: '请选择验证结果', trigger: 'change' }],
      }
    }
  },
  created() {
  },
  computed: {
    // 表单配置项
    formList() {
      let list = [
        {
          keyName: this.onlyRead? 'name' :'resultId',
          type: Selector,
          label: '验证结果',
          attrs: {
            selectType: '61',
            labelInValue: false
          },
          getOption: (e) => {
            this.$emit('resultChange', e)
          },
          // data: [
          //   {
          //     value: '0',
          //     label: '合格'
          //   },
          //   {
          //     value: '1',
          //     label: '不合格'
          //   },
          //   {
          //     value: '2',
          //     label: '继续处理'
          //   },
          // ]
        },
      ]
      return list
    },
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>